<template>
    <div class="circular-progress-bar">
        <div id="container" style="height: 200px"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    props: {
    },
    computed: {
        
    },
    methods: {
        initial() {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false,
                
            });
            var app = {};

            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [50, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            window.addEventListener('resize', myChart.resize);
        }
    },
    mounted: {

    },
    mounted(){
        this.initial();
    },
};
</script>
  
<style lang="scss" scoped></style>
  